<template>
  <!-- 剩余期限分布  -->
  <div>
    <div>
      <polylineColumnBlendEcharts ref="polylineColumnBlendEcharts" :option-data="echartsData" />
    </div>
  </div>
</template>

<script>
import polylineColumnBlendEcharts from '@/views/bond/bondPositionInformation/polylineColumnBlendEcharts.vue'
export default {
  components: {
    polylineColumnBlendEcharts
  },
  props: {
    echartsDataParent: {
      type: Object,
      default: () => undefined
    }
  },
  data() {
    return {
      showEcharts: false,
      echartsData: undefined
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.echartsData = {
        titleZ: this.$t('金额'),
        titleX: this.$t('数量'),
        dataZ: [0.78, 9.1, 5.53, 3, 1.5],
        dataX: [6, 24, 13, 6, 4],
        optionsArr: ['1年以下', '1-3年', '3-5年', '5-7年', '7年以上'],
        leftName: this.$t('债券余额(万元)'),
        rightName: this.$t('债券数量')
      }
      if (this.echartsDataParent !== undefined) {
        this.echartsData = this.echartsDataParent
      }
      this.showEcharts = true
    }
  }
}
</script>

<style scoped>

</style>
